<template>
  <div id="app">
    <div class="header">
      <span v-show="isShow" class="goback" @click="goBack">
        <i class="van-icon van-icon-arrow-left"></i>
        返回
      </span>
      邓琪皮鞋
    </div>
    <router-view />
    <van-tabbar v-model="active">
      <van-tabbar-item to="/home">
        <span>首页</span>
        <i slot="icon" class="iconfont icon-index-fill" />
      </van-tabbar-item>
      <van-tabbar-item to="/member">
        <span>会员</span>
        <i slot="icon" class="iconfont icon-icon_zhanghao" />
      </van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :info="count" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      active: 0,
      path: '',
      isShow: false
    }
  },
  methods: {
    ...mapMutations(['setUserCount']),
    goBack() {
      this.$router.go(-1)
    },
    anc() {
      this.path = this.$route.path
      if (this.path !== '/home') {
        this.isShow = true
      }
    },
    addSum() {
      var sum = 0
      const shop = JSON.parse(window.localStorage.getItem('car'))
      for (let i = 0; i < shop.length; i++) {
        sum += shop[i].count
      }
      this.setUserCount(sum)
    }
  },
  created() {
    this.anc(), this.addSum()
  },
  watch: {
    $route(now, old) {
      if (now.path == '/home') {
        this.isShow = false
      } else {
        this.isShow = true
      }
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

<style lang="less">
#app {
  padding: 40px 0 60px 0;
  border-bottom: 0.1px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #1989fa;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  .goback {
    position: fixed;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    left: 15px;
    i {
      display: inline-block;
    }
  }
}
</style>
